<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/top.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <link rel="stylesheet" type="text/css" href="css/storePageMain.css">
</style>
</head>
<body>
<div class="header">
    <h1 id="myh1">欢迎光临宠物商店!</h1>
</div>

<div class="topnav">
    <!--跳转到目录下的网页。网页大体是一样的，只是展示的商品不一样-->
    <a href="welcome" class="currentSelect" target="_self">首页</a>
    <a href="category?categoryId=cat" target="_self">猫猫</a>
    <a href="category?categoryId=dog" target="_self">狗狗</a>
    <a href="category?categoryId=bird" target="_self">鸟类</a>
    <a href="category?categoryId=pokemon" target="_self">宝可梦</a>
    <a href="category?categoryId=bugCat" target="_self">猫猫虫</a>
    <!--搜索框-->
    <form action="Search" method="post">
        <div class="searchDiv" id="searchDiv">
            <input type="text" name="searchName" id="searchName" placeholder="请输入想搜索的商品" style="float: left;outline: none;border-style:none; height: 43px;">
            <input type="submit" name="submitSearch" class="searchBtn" id="#" value="搜索">
            <!--自动补全-->
            <div id="autoComplete" class="searchComp">
                <li id="autoCompleteLi">
                </li>
            </div>
        </div>
    </form>
    <!--搜索框-->
    <c:if test="${sessionScope.username != null}">
        <a href="space" style="float: right;" target="_self">个人中心</a>
    </c:if>
    <c:if test="${sessionScope.username == null}">
        <a href="login" style="float: right;" target="_self">欢迎登录</a>
    </c:if>
    <a href="cart" style="float: right;" target="_self">购物车</a>
</div>

<div class="mainColumn" style="background-image:url(../../../image/mainPage/mainBackground.png);background-size: 100% ">
    <div id="scroller" style="transition: none">
        <div class="pre"><img src="image/mainPage/left-arrow.png" style="top:50%;margin-top: -16px;position: relative;"></div>
        <div class="next"><img src="image/mainPage/right-arrow.png" style="top:50%;margin-top: -16px;position: relative;"></div>
        <!--上面两个div，用于显示上一页和下一页的箭头-->
        <ul id="imglist">
            <li><a href="category?categoryId=cat" target="_self"><img src="image/mainPage/mainPageCat.jpg"></a></li>
            <li><a href="category?categoryId=dog" target="_self"><img src="image/mainPage/mainPageDog.jpg"></a></li>
            <li><a href="category?categoryId=bird" target="_self"><img src="image/mainPage/mainPageBird.jpg"></a></li>
            <li><a href="category?categoryId=pokemon" target="_self"><img src="image/mainPage/mainPagePokemon.png"></a></li>
            <li><a href="category?categoryId=bugCat" target="_self"><img src="image/mainPage/mainPageBugCat.jpg"></a></li>
            <li><a href="category?categoryId=cat" target="_self"><img src="image/mainPage/mainPageCat.jpg"></a></li>
        </ul>
        <!--上面6个li，用于显示五张图片，为了过度流畅，增加第6张图片于第一张相同-->
        <ul class="indexes">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!--上面五个li，用于显示五个圆圈-->
    </div>

    <div>
        <div class="sideCircle1">
            <a href="category?categoryId=cat" target="_self">
                <img src="image/mainPage/catMain.PNG" title="猫猫" height="100px" width="100px">
            </a>
        </div>
        <div class="sideCircle1" style="transform: translate(110%,0%);">
            <a href="category?categoryId=dog" target="_self">
                <img src="image/mainPage/dogMain.PNG" title="狗狗" height="100px" width="100px">
            </a>
        </div>
        <div class="sideCircle1" style="transform: translate(-225%,125%);">
            <a href="category?categoryId=bird" target="_self">
                <img src="image/mainPage/birdMain.PNG" title="鸟类" height="100px" width="100px">
            </a>
        </div>
        <div class="sideCircle1" style="transform: translate(225%,125%);">
            <a href="category?categoryId=pokemon" target="_self">
                <img src="image/mainPage/pokemmoMain.PNG" title="宝可梦" height="100px" width="100px">
            </a>
        </div>
        <div class="mainCircle" style="background-color: white">
            <a href="category?categoryId=bugCat" target="_self">
                <img src="image/mainPage/capooMain.gif" title="猫猫虫">
            </a>
        </div>
    </div>
</div>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="javascripts/autoComplete.js"></script>
<script>
    //<!--页面轮播脚本-->
    //页面轮播图部分代码
    var left = 0;//轮播图的当前位置，用于切换
    var tolef=0;//轮播图滑动的目标位置，用于快速切换，常规滑动不用
    var timer;//定时器
    var pre = document.querySelector('.pre');//获取上一页控件
    var next = document.querySelector('.next');//获取下一页控件
    let indexes = document.getElementsByClassName('indexes')[0].children;//获取圆圈数组
    var ind = 0;//保存当前被选中圆圈的下标

    for (let i = 0; i < indexes.length; i++) {
        indexes[i].onclick = function () {
            ind = i;
            setStyle();
            imgChange(ind);
        }
    }//对于每个圆圈，设置点击事件

    function setStyle(){
        let active = document.getElementsByClassName('active')[0];
        active.classList.remove('active');
        indexes[ind].classList.add("active");
    }//设置圆圈被选择时的样式，根据ind的值来设置对应的圆圈

    run();//常规切换函数
    function run(){
        if(left<=-4000){
            left=0;
        }//如果left小于-4000,则表明要从最后一张切换到第一张
        ind = Math.floor(-left/800);//定位是第几张图片
        setStyle();//设置对应圆圈样式
        imglist.style.marginLeft = left + 'px';//设置图片位置
        var n=(left%800==0)?n=1200:n=10;//如果图片刚刚就位，则延迟1.2秒，否则延迟10毫秒
        left -=10;//设置位置，逐步左移
        timer = setTimeout(run,n);//定时器到点，调用函数
    }
    //快速切换函数，用于点击箭头时的切换
    function quickChange(){
        if(left != tolef){
            if(Math.abs(left-tolef)>=50){
                left += (tolef-left)/Math.abs(tolef-left)*50;//如果离目标有一段距离，则加速切换
            }else{
                left=tolef;//否则直接到达目标位置
            }
            imglist.style.marginLeft = left + 'px';//设置图片位置
            if(left==tolef){
                //如果已经到达目标位置，则重启run函数计时器事件，关闭该函数计时器事件
                clearTimeout(timer);
                timer = setTimeout(run,10);
            }
            //否则设置该函数为计时器到点事件
            clearTimeout(timer);
            timer = setTimeout(quickChange,10);
        }else{
            //如果已经到达目标位置，则重启run函数计时器事件，关闭该函数计时器事件
            clearTimeout(timer);
            timer = setTimeout(run,1200);
        }
    }


    function imgChange(n){
        ind = n;//让li处于第n个
        if(n<0){
            //如果n小于0，则是从第一个跳到最后一个
            //切换到最后一页（和第一页一样）
            //n=4，ind=4
            left=-4000;
            imglist.style.marginLeft = left + 'px';
            n=4;
            ind=4;
        }
        if(n>=5){
            //如果n大于等于5，则是从最后一张跳到第一张
            left=800;
            imglist.style.marginLeft = left + 'px';
            n=0;
            ind=0;
        }
        if(ind>4){
            ind=0;
        }
        setStyle();
        let lt = -(n*800);
        tolef=lt;
        clearTimeout(timer);
        timer = setTimeout(quickChange,5);
    }

    pre.onclick = function(){
        //alert(left);
        let index = Math.floor(-left/800)-1;//上一张
        imgChange(index);
    }
    next.onclick = function(){
        //alert(left);
        let index = Math.floor(-left/800)+1;//下一张
        imgChange(index);
    }
    //*****
</script>
<%@include file="../common/bottom.jsp"%>
